<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test2</title>
    <style type="text/css">
        div {
            padding-bottom:100px;
        }
    </style>
<!--    <script type="text/javascript" src="jquery.min.js"></script>-->
</head>
<!--我们来设想这样一个应用。一个页面来显示一篇长文章，该文章内容很长，分为很多章节。我们希望页面不会一次把所有章节的内容都加载起来，而是有一个章节导航，
点击每个章节链接，通过jax加载具体章节的内容，而其它页面部分不需要要变化。-->

<body>
<div style="float:left;border:1px solid red;margin:20px">
    <p><a href="javascript:;" id="section1">第1章</a></p>
    <p><a href="javascript:;" id="section2">第2章</a></p>
    <p><a href="javascript:;" id="section3">第3章</a></p>
</div>
<div style="float:left;border:1px solid red;margin:20px" id="content">

</div>
<script>
    // $(function(){
    //     //添加链接的处理事件
    //     $("a").click(ajax);
    //     //加载默认的章节,默认显示第1章
    //     $("#section1").trigger("click");
    // });
    //
    // function ajax(event){
    //     //实际的流程是发起ajax请求，获取内容并显示。这里为了简化，没有写实际的ajax请求。
    //     //这段代码应该在ajax的请求响应中编写。
    //     $("#content").html(this.id+"的内容");
    //     var title = this.id;
    //     document.title = title;
    // }
</script>
<script>
    /**
     * 在浏览器加载该页面，当我们点击不同的章节链接时，内容会跟着变化，浏览器的标题也跟着变化。但是：
     1）回退、前进按钮用不了
     2）当我们刷新页面时，不管当前在哪个章节，都会重新回到第一个章节。
     3）地址栏的url没有变化，也意味着我们没法把某个章节的地址保存下来，以后再次打开直接显示该章节内容。
     上面就是传统ajax应用的一些弊端。下面我们就来解决这些问题。
     我们先给出解决代码：
     */
</script>

</body>

</html>